/* 

需求：

1. 顶部导航页面滑动大于80像素时候，会改为固定定位
2. 点击顶部导航部分模块，页面会滑动到对应区域
3. 点击顶部小模块，底部的黑色线条会滑动到对应区域
4. 页面滑动到大模块对应区域，顶部的黑色线条也会滑动到部分区域

*/
window.addEventListener('load', function () { 
    //对象获取
    const title = document.querySelectorAll('.productnav-link')//顶部选项卡
    const line = document.querySelector('.line')//滑动线
    const productNav = document.querySelector('.productnav')//需要定位的顶栏
    const productNavBox_Height = document.querySelector('.productnav-box').offsetHeight//顶栏高度
    const series = document.querySelectorAll('.series-item-title')//全部板块对象

    //数据存储
    let titleOffsetLeftArr = []
    let titleOffsetWidthArr = []

    //是否处于顶部固定定位状态
    let navIsFixed = false

    //点击事件的页面定位跳转
    for (let i = 0; i < title.length; i++) {
        titleOffsetLeftArr[i] = title[i].offsetLeft
        titleOffsetWidthArr[i] = title[i].offsetWidth
        title[i].addEventListener('click', function () {
            navIsFixed ?
                document.documentElement.scrollTop = series[i].offsetTop-productNavBox_Height
                :document.documentElement.scrollTop = series[i].offsetTop
        })
    }

    //滑动事件的动态
    window.addEventListener('scroll', function () {
        const sct = document.documentElement.scrollTop
        if (sct > 80) {
            productNav.classList.add('fixed')
            navIsFixed = true
            series[0].style.marginTop = productNavBox_Height + 'px'
        } else {
            productNav.classList.remove('fixed')
            navIsFixed = false
            series[0].style.marginTop = 0
        }
        sct >= series[0].offsetTop-parseFloat(series[0].style.marginTop) ? lineActive(0) : ``
        sct >= series[1].offsetTop-parseFloat(series[0].style.marginTop) ? lineActive(1) : ``
        sct >= series[2].offsetTop-parseFloat(series[0].style.marginTop) ? lineActive(2) : ``
        sct >= series[3].offsetTop-parseFloat(series[0].style.marginTop) ? lineActive(3) : ``
        
    })

    //滑动线位置变化函数
    function lineActive(index) { 
        line.style.width = titleOffsetWidthArr[index]+'px'
        line.style.transform = `translateX(${titleOffsetLeftArr[index]}px)`
    }
})
